<template>
  <div class="wrap">
    <!-- 开课奖励 -->
    <div class="start-class">
      <div class="step-add">
        <div
          class="btn-contact"
          @click="addTeacher(1)"
          ref="buriedPoint1"
          name="去联系"
        >
          <img
            src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/guide_btn1.png"
          />
        </div>
        <div
          class="group"
          @click="addTeacher(2)"
          ref="buriedPoint2"
          name="入群"
        >
          <img
            src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/guide_btn2.png"
          />
        </div>
        <div
          class="receive"
          @click="addTeacher(3)"
          ref="buriedPoint3"
          name="领取礼包"
        >
          <img
            src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/guide_btn3.png"
          />
        </div>
        <div class="surplus">
          仅剩 &nbsp;<span class="num-red">{{ numBels }}</span> 份
        </div>
        <!-- 轮播 -->
        <div class="gifts-swiper">
          <van-swipe
           class="my-swipe" 
            :autoplay="5000"
            :show-indicators="false"
            loop
          >
            <van-swipe-item
              v-for="(item, index) in giftsSwiperList"
              :key="index"
            >
              <img :src="item.imgUrl" class="bannerImg" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div
        class="title"
        @click="startclass(4)"
        id="id1"
        ref="buriedPoint4"
        name="点击开课奖励图片"
      ></div>
    </div>

    <!-- 课程特色 -->
    <div class="feature">
      <div class="title"></div>
      <div class="img-title-box">
        <div
          class="img-center"
          v-for="(item, index) in swpeTtitle1"
          name="课程特色标题"
          ref="buriedPoint5"
          :key="item.id"
          @click="courseTitle(index, 5)"
        >
          <img :src="courseTitleIndex == index ? item.atveImg : item.imgUrl" />
        </div>
      </div>
      <!-- 轮播 -->
      <div class="featu-swiper-box">
        <van-swipe
          ref="swipeCourde"
          class="my-swipe"
          :autoplay="intervalTime"
          loop
          :show-indicators="false"
          @change="swiperChange"
        >
          <van-swipe-item v-for="(item, index) in swpeTtitle1" :key="index">
            <img :src="item.imgCenter" class="bannerImg" />
          </van-swipe-item>
        </van-swipe>
        <!-- 指示灯 -->
        <div class="indicator-light">
          <img
            v-for="(j, x) in swpeTtitle1"
            :key="j.id"
            class="img-center"
            :class="courseTitleIndex == x ? 'swiperDotAtver' : ''"
            :src="courseTitleIndex == x ? j.swiperDotAtver : j.swiperDot"
          />
        </div>
      </div>
    </div>

    <!-- 科学课程体系 -->
    <div class="science-course">
      <div class="title"></div>
      <div class="img-title-box">
        <div
          class="img-center"
          v-for="(item, index) in scienceList"
          :key="item.id"
          ref="buriedPoint7"
          @click="scienceimgClick(index, 7)"
          name="科学课程体系标题"
        >
          <img :src="scienceIndex == index ? item.titleAtve : item.titleUrl" />
        </div>
      </div>
      <!-- 轮播 -->
      <div class="backg">
        <div class="item-center-img">
          <van-swipe
            ref="swipesCienceCourde"
            class="my-swipe"
            :autoplay="intervalScience"
            :show-indicators="false"
            @change="scienceChange" 
            loop    
          >
            <van-swipe-item
              v-for="(item, index) in scienceList" 
              :key="index"
            >
              <img :src="item.imgCenter" class="bannerImg" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>

    <!-- 点击联系老师 -->
    <div 
      class="contact-teache"
      @click="startclass(8)" 
      ref="buriedPoint8" 
      name="联系老师-了解课程详情按钮-上"
    >
     <img
      class="btn-img" 
      src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/contact_teache1.png"
    />
   </div>

    <!-- 好评轮播图 -->
   <div class="praise-box">
    <div class="back-left"></div>
    <div class="back-right">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item
          v-for="(item, index) in praiseList" 
          :key="index"
        >
          <img :src="item.imgUrl" class="bannerImg" />
        </van-swipe-item>
      </van-swipe>
    </div>
   </div>

   <!-- 贴心服务 -->
   <div class="saeve-teache">
     <div class="title"></div>
     <div
        class="contact-teache"
         @click="startclass(9)" 
        id="id-teaache"
        ref="buriedPoint9" 
        td-name="联系老师-了解课程详情按钮-下">
       <img 
        class="btn-img" 
        src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/contact_teache1.png"
        mode="aspectFill"
       />
     </div>
     <div class="text-img"></div>
   </div>

   <!-- 弹窗 -->
   <van-popup v-model="popupShow">
      <div class="cancel-order">
        <div class="state-title" :class="dayNum < 3 ? 'tuesday' : ''"><span class="corlr-red">今天19:00</span>{{ classandConten }}</div>
        <div class="login-title" v-if="dayNum<3">登陆即开第一课</div>
        <div class="num-contact">已有<span class="corlr-red">{{ contactNum }}</span>联系老师</div>
        <div class="teacher-dialog" @click="popupShow = false" ref="buriedPoint11" name="关闭弹窗">
          <img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/popup_add_close.png"/>
        </div>
        <div class="footer-btn"  @click="addTeacher(10)" ref="buriedPoint10" name="弹窗里的联系老师按钮">
          <img  mode="aspectFill" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/popup_btn.png"/>
        </div>
     </div>
   </van-popup>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Popup } from "vant";
// import at from '../../../utils/thinkingdata.esm.min.js'
export default {
  name: "Guide",
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Popup.name]: Popup
  },
  data() {
    const vm = this;
    return {
      undata: {
         appId: '1abdbc658dbb4c518699aa97049e23fd', // 您的项目的 APP_ID
         serverUrl: 'https://receiver.ta.thinkingdata.cn/sync_js', // 上传数据的 URL
         send_method: 'ajax', // 数据上报方式，默认为 'image'
         showLog: true, // 是否打印上报数据，打开后将会在浏览器控制台打印上报的数据，默认为 true 即开启.
      },
      // 礼包数据
      giftsSwiperList: [
        {
          id: 1,
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group.png"
        },
        {
          id: 1,
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-1.png"
        },
        {
          id: 1,
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-2.png"
        },
        {
          id: 1,
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-3.png"
        },
        {
          id: 1,
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-4.png"
        },
        {
          id: 1,
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-5.png"
        }
      ],
      // 课程特色数据
      swpeTtitle1: [
        {
          id: 1,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature2.png",
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b1.png",
          atveImg:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a1.png",
          swiperDot:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png",
          swiperDotAtver:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png"
        },
        {
          id: 2,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature3.png",
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b2.png",
          atveImg:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a2.png",
          swiperDot:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png",
          swiperDotAtver:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png"
        },
        {
          id: 3,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature4.png",
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b3.png",
          atveImg:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a3.png",
          swiperDot:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png",
          swiperDotAtver:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png"
        },
        {
          id: 4,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature5.png",
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b4.png",
          atveImg:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a4.png",
          swiperDot:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png",
          swiperDotAtver:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png"
        },
        {
          id: 5,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature6.png",
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b5.png",
          atveImg:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a5.png",
          swiperDot:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png",
          swiperDotAtver:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png"
        },
        {
          id: 6,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature7.png",
          imgUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b6.png",
          atveImg:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a6.png",
          swiperDot:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png",
          swiperDotAtver:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png"
        }
      ],
      // 科学课程体系
      scienceList: [
        {
          id: 1,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_certer1.png",
          titleUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_b1.png",
          titleAtve:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_a1.png"
        },
        {
          id: 2,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_certer2.png",
          titleUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_b2.png",
          titleAtve:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_a2.png"
        },
        {
          id: 3,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_certer3.png",
          titleUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_b3.png",
          titleAtve:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_a3.png"
        },
        {
          id: 4,
          imgCenter:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_certer4.png",
          titleUrl:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_b4.png",
          titleAtve:
            "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_a4.png"
        }
      ],
      // 好评数据
      praiseList: [
        { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list1.png'},
        { id: 2, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list2.png'},
        { id: 3, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list3.png'},
        { id: 4, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list4.png'},
        { id: 5, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list5.png'}
      ],
      contactNum: parseInt((new Date() - new Date('2022-03-15'))/1000/5), // 联系老师数量
      popupShow: false, // 弹窗状态
      intervalScience: 3000, // 科学课程体系切换时间
      intervalTime: 3000, // 课程特色切换时间
      classandConten: "成立班级",
      dayNum: null,
      courseTitleIndex: 0, // 默认课程特色标题下标
      scienceIndex: 0, // 科学体系下标
      numBels: null
    };
  },
  created() {
    this.getRandomNumber(88, 120)
    this.getDayTime()
    this.giftBag()
    this.addTeacherNum()
    // at.init(this.undata)
    // at.quick('autoTrack')
    // at.timeEvent('ta_pageview')
    // at.timeEvent('click')
    // at.trackLink( // 监控 HTML 元素点击事件
    //       {
    //         tag: ['div'], //HTML标签
    //         class: ['class1', 'class2'], //自定义的Class名称
    //         id: ['id-teaache', 'id2'], //自定义的ID名称
    //       }, 
    //       'click', //追踪事件的名称
    //       {
    //         production: '产品名', //可以是课程的spu之类的
    //       } 
    //   )  
  },
  methods: {
    // 跳小程序添加老师
    addTeacher() {
      window.location.href = 'weixin://dl/business/?t=7MFpzvU7aOg'
      this.popupShow = false
    },
    // 打开弹窗
    startclass() {
      this.popupShow = true
    },
    // 添加老师数量
    addTeacherNum() {
      const vm = this
      vm.guildeTime = setInterval(()=>{
        vm.contactNum =  vm.contactNum + 1;
      },Math.floor(Math.random() *5000 ) + 3000)
    },
    // 礼包数量
    giftBag() {
      const vm = this;
      clearInterval(vm.guildeTime);
      vm.guildeTime = setInterval(() => {
        if (vm.numBels <= 5) {
          vm.numBels = Math.floor(Math.random() * (88 - 120)) + 120;
        }
        vm.numBels = vm.numBels - 1;
        localStorage.setItem("GiftBag", vm.numBels);
      }, 20000);
    },
    // 生成随机数
    getRandomNumber(max, min) {
      const vm = this;
      if (localStorage.getItem("GiftBag")) {
        vm.numBels = localStorage.getItem("GiftBag");
      } else {
        this.numBels = Math.floor(Math.random() * (max - min)) + min;
      }
    },
    // 获取周几
    getDayTime() {
      this.dayNum = new Date().getDay() || 7;
      if (this.dayNum >= 3) {
        this.classandConten = " 开启第一课";
      }
    },
    // 点击科学课程体系标题
    scienceimgClick(index) {
       this.$refs.swipesCienceCourde.swipeTo(index)
       this.intervalScience = 10000
       let scienceTime = setInterval(()=>{
        clearInterval(scienceTime)
          this.intervalScience = 3000
      },10000)
    },
    // 点击课程特色标题
    courseTitle(index) {
      this.$refs.swipeCourde.swipeTo(index)
      this.intervalTime = 10000
      let guildeTime = setInterval(()=>{
        clearInterval(guildeTime)
          this.intervalTime = 3000
      },10000)
    },
    // 科学课程特体系轮播图事件
    scienceChange(e) {
       this.scienceIndex = e
    },
    // 课程特色轮播图事件
    swiperChange(e) {
      this.courseTitleIndex = e;
    }
  }
};
</script>

<style lang='scss' scoped>
img {
  display: block;
  width: 100%;
  height: 100%;
}
.wrap {
  width: 100vw;
  height: auto;
  background-image: url("https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/wapr_back.png");
  background-repeat: repeat-y;
  background-size: 100% 100%;
  padding-bottom: 8.533vw;
  //  123步-开课奖励
  .start-class {
    position: relative;
    z-index: 9;
    padding-top: 120vw;
    margin-bottom: 4.267vw;
    .step-add {
      width: 89.6vw;
      height: 42.667vw;
      background-image: url("https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/guide_add.png");
      background-repeat: repeat-y;
      background-size: 100% 100%;
      margin: auto;
      margin-bottom: 4.267vw;
      position: relative;
      .btn-contact,
      .group,
      .receive {
        position: absolute;
        bottom: 1.6vw;
        width: 25.6vw;
        height: 9.6vw;
      }
      .btn-contact {
        left: 1.067vw;
        animation-fill-mode: both;
        animation: btnget 0.4s infinite 1s;
      }
      @keyframes btnget {
        0% {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(0.8, 0.8);
        }
        100% {
          transform: scale(1, 1);
        }
      }
      .group {
        left: 32vw;
      }
      .receive {
        right: 1.067vw;
      }
      .surplus {
        position: absolute;
        right: 7.467vw;
        bottom: 12vw;
        font-family: "Source Han Serif CN";
        font-style: normal;
        font-weight: 500;
        font-size: 2.667vw;
        color: #ffffff;
        .num-red {
          font-size: 3.2vw;
          color: #ff0000;
          padding: 0 1.333vw;
        }
      }
      // 礼包轮播
      .gifts-swiper {
        width: 18.4vw;
        height: 15.733vw;
        position: absolute;
        top: 11.333vw;
        right: 3.2vw;
        van-swipe {
          height: 15.733vw !important;
        }
      }
    }
    .title {
      width: 100%;
      height: 60.267vw;
      background-image: url("https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/reward.png");
      background-repeat: repeat-y;
      background-size: 100% 100%;
      margin: auto;
    }
  }

  // 课程特点
  .feature {
    position: relative;
    z-index: 9;
    .title {
      width: 54.667vw;
      height: 15.467vw;
      background-image: url("https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_title.png");
      background-size: 100% 100%;
      margin: auto;
    }
    .img-title-box {
      display: flex;
      flex-wrap: wrap;
      padding: 0 5.333vw;
      .img-center {
        width: 26.667vw;
        height: 8vw;
        margin: 2.667vw 4vw 0 0;
      }
      .img-center:nth-child(3n) {
        margin-right: 0;
      }
    }
    .featu-swiper-box {
      padding: 0 5.333vw;
      margin-top: 1.6vw;
      van-swipe {
        height: 49.6vw !important;
      }
      .indicator-light {
        display: flex;
        justify-content: center;
        align-items: center;
        .img-center {
          width: 2.933vw;
          height: 2.933vw;
          margin: 2.133vw 1.6vw 0 1.6vw;
        }
        .swiperDotAtver {
          width: 4.533vw;
          height: 4.533vw;
        }
      }
    }
  }

  // 科学课程体系
  .science-course {
    position: relative;
    z-index: 9;
    margin-top: 6.667vw;
    .title {
      width: 53.333vw;
      height: 15.467vw;
      background-image: url("https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title.png");
      background-repeat: repeat-y;
      background-size: 100% 100%;
      margin: auto;
    }
    .img-title-box {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 4.533vw 0 -8vw 0;
      position: relative;
      z-index: 10;
      .img-center {
        width: 12.8vw;
        height: 8vw;
        margin: 0 3.2vw;
      }
    }
    // 轮播
    .backg {
      width: 97.333vw;
      height: 137.867vw;
      background-image: url("https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_back.png");
      background-repeat: repeat-y;
      background-size: 100% 100%;
      margin-left: auto;
      position: relative;
      .item-center-img {
        width: 69.333vw;
        height: 123.733vw;
        position: absolute;
        bottom: 3.867vw;
        right: 5.333vw;
        swiper {
          height: 123.733vw !important;
        }
      }
      .arrow {
        position: absolute;
        top: 46%;
        width: 9.6vw;
        height: 9.6vw;
      }
    }
  }

      
  // 联系老师
  .contact-teache{
    padding: 5.867vw 5.333vw 2.133vw 5.333vw;
    .btn-img{
      width: 89.333vw;
      height: 10.667vw;
    }
  }

  // 好评轮播图
  .praise-box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5.333vw;
    .back-left{
      width: 51.2vw;
      height: 90.667vw;
      background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/contact_teache2.png');
      background-repeat:repeat-y;
      background-size:100% 100%;
      margin-right: 2.667vw;
    }
    .back-right{
      width: 35.467vw;
      height: 90.667vw;
      background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/contact_teache3.png');
      background-repeat:repeat-y;
      background-size:100% 100%;
      padding: 1.067vw 1.6vw 0 1.6vw;
      swiper{
        height: 68.267vw;
      }
    }
  }

  // 贴心服务
  .saeve-teache{
    position: relative;
    z-index:9;
    margin-top: 5.6vw;
    .title{
      width: 79.467vw;
      height: 48.267vw;
      background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/saeve1.png');
      background-repeat:repeat-y;
      background-size:100% 100%;
      margin: auto;
    }
    .text-img{
      width: 76.533vw;
      height: 8.8vw;
      background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/saeve2.png');
      background-repeat:repeat-y;
      background-size:100% 100%;
      margin: auto;
    }
  }

 ::v-deep .van-popup{
    background: none !important;
    padding: 6.667vw;
  }
    // 弹窗
    .cancel-order{
      width: 74.667vw;
      height: 87.467vw;
      background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/popup_add.png');
      background-repeat:repeat-y;
      background-size:100% 100%;
      text-align: center;
      position: relative; 
      .state-title{
         font-size: 5.333vw;
         font-weight: 700;
         padding-top: 6.333vw;
         color: #001F74;
         .corlr-red{
           color: #FF0000;
         }
      }
      .tuesday{
        padding-top: 3.333vw;
      }
      .login-title{
        font-size: 3.2vw;
        font-weight: 700;
        color: #001F74;
      }
      //  .week{
      //   .week-title{
      //     font-size: 4vw;
      //     font-weight: 700;
      //     padding-top: 5.067vw;
      //     color: #001F74;
      //     .week-corlr-red{
      //        color: #FF0000;
      //     }
      //   }
      //   .tuesday{
      //      padding-top: 8vw;
      //   }
      //   .subtitle{
      //     padding-top: 0rpx;
      //   }
      // }

      .num-contact{
        font-size: 3.2vw;
        font-weight: 700;
        color: #001F74;
       .corlr-red{
         color: #FF0000;
         padding: 0 1.333vw;
       }
      }
      .teacher-dialog{
        width: 6.4vw;
        height: 6.4vw;
        position: absolute;
        top: -5.333vw;
        right: -4.667vw;
      }
       .footer-btn{
        width: 58.667vw;
        height: 12.8vw;
        position: absolute;
        left: 8vw;
        bottom: 5.333vw;
        animation-fill-mode: both;
        animation: btnget 0.55s infinite 1s;
      }
      @keyframes btnget {
         0% { transform: scale(1,1);}
         50% { transform: scale(0.93,0.93);}        
         100% { transform: scale(1,1);}
       }
    }
}
</style>